<template>
  <div class="row q-col-gutter-sm q-py-sm">
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
      <q-card
        class="q-ma-xs no-shadow"
        bordered
        style="background-color: #38b1c5"
      >
        <q-card-section class="text-h6 text-white"> 今日 </q-card-section>
        <q-card-section class="q-pa-none">
          <VChart
            :option="LineChart2Option"
            class="q-mt-md"
            :resizable="true"
            autoresize
            style="height: 250px"
          />
        </q-card-section>
      </q-card>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
      <q-card
        class="q-ma-xs no-shadow"
        bordered
        style="background-color: #ea4b64"
      >
        <q-card-section class="text-h6 text-white"> 销售额 </q-card-section>
        <q-card-section class="q-pa-none">
          <VChart
            :option="BarChartOption"
            class="q-mt-md"
            :resizable="true"
            autoresize
            style="height: 250px"
          />
        </q-card-section>
      </q-card>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
      <q-card
        class="q-ma-xs no-shadow"
        bordered
        style="background-color: rgb(30, 136, 229)"
      >
        <q-card-section class="text-h6 text-white"> 访问量 </q-card-section>
        <q-card-section class="q-pa-none">
          <VChart
            :option="LineChartOption"
            class="q-mt-md"
            :resizable="true"
            autoresize
            style="height: 250px"
          />
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart, BarChart, LineChart, LinesChart } from 'echarts/charts';

import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
} from 'echarts/components';
import VChart from 'vue-echarts';
import type {
  BarSeriesOption,
  PieSeriesOption,
  LineSeriesOption,
  LinesSeriesOption,
} from 'echarts/charts';
import type { ComposeOption } from 'echarts/core';

type ECOption = ComposeOption<
  BarSeriesOption | PieSeriesOption | LineSeriesOption | LinesSeriesOption
>;

use([
  CanvasRenderer,
  PieChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LineChart,
  LinesChart,
]);

const BarChartOption: ECOption = {
  tooltip: { show: true },
  title: {
    show: true,
    textStyle: { color: 'rgba(0, 0, 0 , .87)', fontFamily: 'sans-serif' },
  },
  grid: { containLabel: true, bottom: '10%', top: '5%' },
  xAxis: {
    show: false,
    type: 'category',
    axisLine: {
      lineStyle: { color: 'rgba(0, 0, 0 , .54)', type: 'dashed' },
    },
    axisTick: {
      show: true,
      alignWithLabel: true,
      lineStyle: {
        show: true,
        color: 'rgba(0, 0, 0 , .54)',
        type: 'dashed',
      },
    },
    axisLabel: { show: false },
  },
  yAxis: {
    show: false,
    type: 'value',
    axisLine: {
      lineStyle: { color: 'rgba(0, 0, 0 , .54)', type: 'dashed' },
    },
    axisLabel: { show: false },
    splitLine: { lineStyle: { type: 'dashed' } },
    axisTick: {
      show: true,
      lineStyle: {
        show: true,
        color: 'rgba(0, 0, 0 , .54)',
        type: 'dashed',
      },
    },
  },
  series: [
    {
      type: 'bar',
      barGap: '-100%',
      itemStyle: { color: 'rgba(0,0,0,0.1)' },
      barWidth: '50%',
    },
    {
      barWidth: '50%',
      type: 'bar',
      itemStyle: { color: '#ffffff' },
    },
  ],
  dataset: {
    source: [
      { label: '0号', 最大值: 500, 平均: 220 },
      {
        label: '1号',
        最大值: 500,
        平均: 182,
      },
      { label: '2号', 最大值: 500, 平均: 191 },
      {
        label: '3号',
        最大值: 500,
        平均: 234,
      },
      { label: '4号', 最大值: 500, 平均: 290 },
      {
        label: '5号',
        最大值: 500,
        平均: 330,
      },
      { label: '6号', 最大值: 500, 平均: 310 },
      {
        label: '7号',
        最大值: 500,
        平均: 123,
      },
      { label: '8号', 最大值: 500, 平均: 442 },
      {
        label: '9号',
        最大值: 500,
        平均: 321,
      },
      { label: '10号', 最大值: 500, 平均: 90 },
      {
        label: '11号',
        最大值: 500,
        平均: 149,
      },
      { label: '12号', 最大值: 500, 平均: 210 },
      {
        label: '13号',
        最大值: 500,
        平均: 122,
      },
      { label: '14号', 最大值: 500, 平均: 133 },
      {
        label: '15号',
        最大值: 500,
        平均: 334,
      },
      { label: '16号', 最大值: 500, 平均: 198 },
      {
        label: '17号',
        最大值: 500,
        平均: 123,
      },
      { label: '18号', 最大值: 500, 平均: 125 },
      { label: '19号', 最大值: 500, 平均: 220 },
    ],
  },
};
const LineChartOption = {
  tooltip: { show: true },
  title: {
    show: true,
    textStyle: { color: 'rgba(0, 0, 0 , .87)', fontFamily: 'sans-serif' },
  },
  grid: { containLabel: true, left: '0', bottom: '0', right: '0' },
  xAxis: {
    show: false,
    type: 'category',
    axisLine: {
      lineStyle: { color: 'rgba(0, 0, 0 , .54)', type: 'dashed' },
    },
    axisTick: {
      show: true,
      alignWithLabel: true,
      lineStyle: {
        show: true,
        color: 'rgba(0, 0, 0 , .54)',
        type: 'dashed',
      },
    },
    axisLabel: { show: false },
    boundaryGap: false,
  },
  yAxis: {
    show: false,
    type: 'value',
    axisLine: {
      lineStyle: { color: 'rgba(0, 0, 0 , .54)', type: 'dashed' },
    },
    axisLabel: { show: false },
    splitLine: { lineStyle: { type: 'dashed' } },
    axisTick: {
      show: true,
      lineStyle: {
        show: true,
        color: 'rgba(0, 0, 0 , .54)',
        type: 'dashed',
      },
    },
  },
  series: [{ type: 'line', areaStyle: {}, smooth: true }],
  dataset: {
    source: [
      { 月份: '一月', 单独访问: 296, 访问主页: 548 },
      {
        月份: '二月',
        单独访问: 1181,
        访问主页: 714,
      },
      { 月份: '三月', 单独访问: 235, 访问主页: 961 },
      {
        月份: '四月',
        单独访问: 294,
        访问主页: 580,
      },
      { 月份: '五月', 单独访问: 765, 访问主页: 730 },
      {
        月份: '六月',
        单独访问: 412,
        访问主页: 1249,
      },
      { 月份: '七月', 单独访问: 1125, 访问主页: 267 },
      {
        月份: '八月',
        单独访问: 800,
        访问主页: 251,
      },
      { 月份: '九月', 单独访问: 948, 访问主页: 1043 },
      {
        月份: '十月',
        单独访问: 1046,
        访问主页: 1118,
      },
      { 月份: '十一月', 单独访问: 363, 访问主页: 573 },
      {
        月份: '十二月',
        单独访问: 909,
        访问主页: 283,
      },
    ],
  },
  color: ['#2196f3'],
};
const LineChart2Option: ECOption = {
  tooltip: { show: true },
  title: {
    show: true,
    textStyle: { color: 'rgba(0, 0, 0 , .87)', fontFamily: 'sans-serif' },
  },
  grid: { containLabel: true, left: '0', bottom: '0', right: '0' },
  xAxis: {
    show: false,
    type: 'category',
    axisLine: {
      lineStyle: { color: 'rgba(0, 0, 0 , .54)', type: 'dashed' },
    },
    axisTick: {
      show: true,
      alignWithLabel: true,
      lineStyle: {
        show: true,
        color: 'rgba(0, 0, 0 , .54)',
        type: 'dashed',
      },
    },
    axisLabel: { show: false },
    boundaryGap: false,
  },
  yAxis: {
    show: false,
    type: 'value',
    axisLine: {
      lineStyle: { color: 'rgba(0, 0, 0 , .54)', type: 'dashed' },
    },
    axisLabel: { show: false },
    splitLine: { lineStyle: { type: 'dashed' } },
    axisTick: {
      show: true,
      lineStyle: {
        show: true,
        color: 'rgba(0, 0, 0 , .54)',
        type: 'dashed',
      },
    },
  },
  series: [{ type: 'line', areaStyle: {}, smooth: false }],
  dataset: {
    source: [
      { 月份: '一月', 单独访问: 296, 访问主页: 548 },
      {
        月份: '二月',
        单独访问: 1181,
        访问主页: 714,
      },
      { 月份: '三月', 单独访问: 235, 访问主页: 961 },
      {
        月份: '四月',
        单独访问: 294,
        访问主页: 580,
      },
      { 月份: '五月', 单独访问: 765, 访问主页: 730 },
      {
        月份: '六月',
        单独访问: 412,
        访问主页: 1249,
      },
      { 月份: '七月', 单独访问: 1125, 访问主页: 267 },
      {
        月份: '八月',
        单独访问: 800,
        访问主页: 251,
      },
      { 月份: '九月', 单独访问: 948, 访问主页: 1043 },
      {
        月份: '十月',
        单独访问: 1046,
        访问主页: 1118,
      },
      { 月份: '十一月', 单独访问: 363, 访问主页: 573 },
      {
        月份: '十二月',
        单独访问: 909,
        访问主页: 283,
      },
    ],
  },
  color: ['#45c2c5'],
};
</script>
